import React, { Component } from 'react'
import Modal from './components/Modal'
import NavBar from './components/NavBar'
import MyTab from './components/MyTab'
export default class App extends Component {
  constructor(){
    super()
    this.state={
      tabs:['热卖','推荐','潮流','时尚']
    }
  }
  render() {
  
    return (
      <>
        <div style={{ display: 'flex' }}>
          <Modal title="新闻资讯">
            <ul>
              <li>2024年两会信息</li>
              <li>娃哈哈AD概念销量</li>
              <li>前端17期有某学员</li>
            </ul>
          </Modal>
          <Modal title="销售订单">
            <table border={1}>
              <tr>
                <td>订单号</td>
                <td>名称</td>
                <td>消费金额</td>
                <td>联系人</td>
              </tr>
              <tr>
                <td>1000001</td>
                <td>鞋子</td>
                <td>100</td>
                <td>颤三</td>
              </tr>
              <tr>
                <td>1000001</td>
                <td>鞋子</td>
                <td>100</td>
                <td>颤三</td>
              </tr>
            </table>
          </Modal>
        </div>
        <hr />
        <div style={{display:'flex'}}>
           <NavBar>
              {{
                left:<div>&lt;</div>,
                middle:<span>京东商城</span>,
                right:<div>我的</div>
              }}
           </NavBar>

           <NavBar>
              {{
                left:<div>&lt;</div>,
                middle:<input type="tex" placeholder='搜索信息'/>,
                right:<div>搜索</div>
              }}
           </NavBar>
        </div>
        <hr />
        <div style={{display:'flex'}}>
            <MyTab tabs={this.state.tabs}></MyTab>

            <MyTab tabs={this.state.tabs} render={arg=>{
              return <button>{arg}</button>
            }}></MyTab>
        </div>
      </>
    )
  }
}
